<app-landing-page-header [title]="'ESG Risk Rating <span class=\'superscript beta-badge\'>NEW</span>'" [subTitle]="'Sustainalytics\' ESG Risk Rating enhances investment decision-making by providing the most accurate measure of the degree
  to which enterprise value is at risk, driven by environmental, social and governance factors:'"></app-landing-page-header>

<div class="container my-5">
  <div class="row mt-3">
    <div class="col-md-6 pr-4">

      <h4>Features</h4>

      <div class="d-flex flex-row mt-3">
        <img src="/assets/icons-svg/icon-methodology.svg" class="research-icon flex-column col-1" />
        <span class="flex-column pl-3">An advanced methodology for rating absolute ESG risk, while allowing for best in class
          analysis.</span>
      </div>

      <div class="d-flex flex-row mt-3">
        <img src="/assets/icons-svg/icon-analyst-view.svg" class="research-icon flex-column col-1" />
        <span class="flex-column pl-3">Deep insights from multiple exposure factors including subindustry, business model,
          geography and incidents history.</span>
      </div>

      <div class="d-flex flex-row mt-3">
        <img src="/assets/icons-svg/icon-governance.svg" class="research-icon flex-column col-1" />
        <span class="flex-column pl-3">Underpinned by fully integrated, comprehensive corporate governance ratings and analysis.</span>
      </div>

      <div class="d-flex flex-row mt-3">
        <img src="/assets/icons-svg/icon-cube.svg" class="research-icon flex-column col-1" />
        <span class="flex-column pl-3">Transparent methodology and multiple levels of data to provide clients with custom
          ESG solutions.</span>
      </div>
    </div>

    <div class="col-md-6">
      <h4>Universe Rating Distribution</h4>
      <div ratingDistributionChart [chartID]="'distributionchart'" [chartData]="riskDistribution" [showRiskLevels]="true" [riskLevels]="riskClusters"
        [primaryName]="'universe'" [secondaryName]="'subIndustry'" [hidePlus]="true" [colors]="ratingDistributionChartColors"
        [graphFontSize]="11">
        <div id='distributionchart' style="height:200px;"></div>
        <div id='benchmarkChartAxis' style="height: 25px; margin-top: 0px;"></div>
      </div>
    </div>
    <div *ngIf='!showTutorial' class='col-md-12 text-right'>
      <span class='more pointer' title="Show tutorial" (click)="toggleTutorial()">see more</span>
    </div>
  </div>
</div>

<div *ngIf='showTutorial' class="bg-primary-light">
  <div class="container py-5">
    <div class="col-md-12 text-right closeIcon">
        <i class="ti-close pointer" title="Hide tutorial" (click)="toggleTutorial()"></i>
    </div>
    <div class="row">
      <div class="col-md-6 pr-5">
        <h4>First time user?</h4>
        <p>We encourage you to make use of the following resources:</p>
        <ul class="list-unstyled">
          <li>
            <a href="javascript:;;" (click)="esgRiskRating.show()" class="text-link">Introduction to ESG Risk Ratings Research Framework <img src="/assets/icons-svg/icon-video.svg" class="download-icon" /></a>
          </li>
          <li>
            <a href="javascript:;;" (click)="mainSignals.show()" class="text-link">Main Signals to Look for in a Company Report <img src="/assets/icons-svg/icon-video.svg" class="download-icon" /></a>
          </li>
          <li>
            <a href="javascript:;;" (click)="scoring.show()" class="text-link">Introduction to Scoring <img src="/assets/icons-svg/icon-video.svg" class="download-icon" /></a>
          </li>
        </ul>

        <hr />

        <h5 class="bold">Sample Reports</h5>
        <ul class="list-unstyled">
          <li class="pl-4"><a href="javascript:;" class="text-link" (click)="downloadFile('https://globalaccess-tutorials.s3.amazonaws.com/Roche_Holding_AG_RiskRatingsReport.pdf')">
            Roche Holding AG <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a>
          </li>
          <li class="pl-4"><a href="javascript:;" class="text-link" (click)="downloadFile('https://globalaccess-tutorials.s3.amazonaws.com/QUALCOMM_Incorporated_RiskRatingsReport.pdf')">
            QUALCOMM Incorporated <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a>
          </li>
          <li class="pl-4"><a href="javascript:;" class="text-link" (click)="downloadFile('https://globalaccess-tutorials.s3.amazonaws.com/Tyson_Foods_Inc_RiskRatingsReport.pdf')">
            Tyson Foods Inc <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a>
          </li>
        </ul>

        <hr class="mt-4" />

        <ul class="list-unstyled">
          <li><a href="javascript:;" class="text-link" (click)="downloadFile('https://globalaccess-tutorials.s3-eu-west-1.amazonaws.com/SustainalyticsESGRiskRatings_WhitePaperVolumeOne_October%202018.pdf')">
            ESG Risk Rating whitepaper Vol. 1 <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a></li>
          <li><a href="javascript:;" class="text-link" (click)="downloadFile('https://globalaccess-tutorials.s3.amazonaws.com/ESG%20Risk%20Rating_Methodology%20document.pdf')">
            ESG Risk Rating Methodology Document <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a></li>
          <li><a href="javascript:;" class="text-link" (click)="downloadFile('https://globalaccess-tutorials.s3.amazonaws.com/ESG%20Risk%20Rating_FAQ.pdf')">
            ESG Risk Rating_FAQ <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a></li>
          <li><a href="javascript:;" class="text-link" (click)="downloadFile('https://marketing.sustainalytics.com/acton/attachment/5105/f-0af7/1/-/-/-/-/Sustainalytics%20ESG%20Risk%20Ratings.pdf')">
            Brochure <img src="/assets/icons-svg/icon-download.svg" class="download-icon" /></a></li>
        </ul>
      </div>
      <div class="col-md-6">
        <!-- VIDEO -->
        <div class="col-md-12">
          <video controls="controls" style="width: 100%" [attr.poster]="getVideoImage(currentVideo, false)" #video>
            <source type="video/mp4" [src]="currentVideo">
            <span title="No video playback capabilities, please download the video below">Video</span>
          </video>
        </div>
        <div class="row">
          <a hrev="javascript:;" class="col-md-2 offset-md-3 videoSelect" (click)="currentVideo = videoPart1; video.load();" [ngClass]="{'selectedPart': currentVideo == videoPart1 }">
            <img [ngStyle]="{ 'background-image': 'url(' + getVideoImage(videoPart1) + ')' }" src="/assets/img/default-video-thumbnail.png" class="videoThumbnail" />
          </a>
          <a hrev="javascript:;" class="col-md-2 videoSelect" (click)="currentVideo = videoPart2; video.load();" [ngClass]="{'selectedPart': currentVideo == videoPart2 }">
            <img [ngStyle]="{ 'background-image': 'url(' + getVideoImage(videoPart2) + ')' }" src="/assets/img/default-video-thumbnail.png" class="videoThumbnail" />
          </a>
          <a hrev="javascript:;" class="col-md-2 videoSelect" (click)="currentVideo = videoPart3; video.load();" [ngClass]="{'selectedPart': currentVideo == videoPart3 }">
            <img [ngStyle]="{ 'background-image': 'url(' + getVideoImage(videoPart3) + ')' }" src="/assets/img/default-video-thumbnail.png" class="videoThumbnail" />
          </a>
        </div>

      </div>
    </div>
  </div>
</div>

<div *ngIf="productPermissions?.riskrating" class="container mt-5">
  <list-risk-rating #list></list-risk-rating>
</div>

<!-- ESG Risk Rating Tutorial Modal -->
<app-modal #esgRiskRating [id]="'esgRiskRating'" [size]="'modal-lg'" (displayed)="play(this.videoRiskRatings)" (hidden)="stop(this.videoRiskRatings)"
  [showCloseButton]="false">
  <div class="app-modal-header">
    ESG Risk Rating Tutorial
  </div>
  <div class="app-modal-body">
    <video controls="controls" style="width: 100%" #videoRiskRatings>
      <source type="video/mp4" [src]="'https://globalaccess-tutorials.s3.amazonaws.com/Recording%20RR%20tutorial_Clark2.mp4'">
      <span title="No video playback capabilities, please download the video below">ESG Risk Rating</span>
    </video>
  </div>
  <div class="app-modal-footer">
    <button class="btn btn-transparent" (click)="stop(this.videoRiskRatings);esgRiskRating.hide();">Close</button>
  </div>
</app-modal>

<!-- Main signals Tutorial Modal -->
<app-modal #mainSignals [id]="'mainSignals'" [size]="'modal-lg'" (displayed)="play(this.videoMainSignals)" (hidden)="stop(this.videoMainSignals)"
  [showCloseButton]="false">
  <div class="app-modal-header">
    Main signals to look for in a company report
  </div>
  <div class="app-modal-body">
    <video controls="controls" style="width: 100%" #videoMainSignals>
      <source type="video/mp4" [src]="'https://globalaccess-tutorials.s3.amazonaws.com/Recording%20RR%20tutorial_Darragh.mp4'">
      <span title="No video playback capabilities, please download the video below">Main signals to look for in a company
        report
      </span>
    </video>
  </div>
  <div class="app-modal-footer">
    <button class="btn btn-transparent" (click)="stop(this.videoMainSignals);mainSignals.hide();">Close</button>
  </div>
</app-modal>

<!-- Introduction to Scoring Tutorial Modal -->
<app-modal #scoring [id]="'scoring'" [size]="'modal-lg'" (displayed)="play(this.videoScoring)" (hidden)="stop(this.videoScoring)"
  [showCloseButton]="false">
  <div class="app-modal-header">
    Introduction to Scoring
  </div>
  <div class="app-modal-body">
    <video controls="controls" style="width: 100%" #videoScoring>
      <source type="video/mp4" [src]="'https://globalaccess-tutorials.s3.amazonaws.com/Recording%20RR%20tutorial_Sophia2.mp4'">
      <span title="No video playback capabilities, please download the video below">Introduction to Scoring</span>
    </video>
  </div>
  <div class="app-modal-footer">
    <button class="btn btn-transparent" (click)="stop(this.videoScoring);scoring.hide();">Close</button>
  </div>
</app-modal>